<template>
  <div class="Statistics">
    <div class="Statistics-user" v-if="userinfo.phone">
      <div class="Statistics-user-head">
        <el-image :src="userinfo.avatarurl" fit="scale-down"></el-image>
      </div>
      <div class="Statistics-user-info">
        <div>
          <span>{{ userinfo.username }}</span>
          <span>TEL:{{ userinfo.phone }}</span>
        </div>
        <div>{{ userinfo.s_department_name }}</div>
      </div>
    </div>
    <!-- <div class="Statistics-number">
      <div class="Statistics-number-content">
        <div>
          <el-image :src="bz1" fit="contain"></el-image>
        </div>
        <div>
          <div>我的待还</div>
          <div><span>10</span><span>(点击查看)</span></div>
        </div>
      </div>
      <div class="Statistics-number-content">
        <div>
          <el-image :src="bz2" fit="contain"></el-image>
        </div>
        <div>
          <div>我的待还</div>
          <div><span style="color: #333">10</span><span>(点击查看)</span></div>
        </div>
      </div>
    </div> -->
    <div class="Statistics-category">
      <div class="line Statistics-category-title">类别统计</div>
      <el-table :data="classList" border style="width: 100%" size="mini">
        <el-table-column prop="typename" label="类别"> </el-table-column>
        <el-table-column prop="jcnum" label="借出/归还数量">
          <template slot-scope="{ row }">
            <div
              :style="{
                color: row.sj_jc_num == row.sj_gh_num ? '#67C23A' : '#E6A23C',
              }"
            >
              {{ row.sj_jc_num }}/{{ row.sj_gh_num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sj_zs_num" label="赠送数量"> </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="default" @click="onLend(2)"
              >我要借出</el-button
            >
            <el-button type="text" size="default" @click="onLend(1)"
              >我要赠送</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Statistics-category">
      <div class="line Statistics-category-title">详细数据统计</div>
      <!-- <div>
        <el-radio-group v-model="radio" size="mini">
          <el-radio-button label="成衣"></el-radio-button>
          <el-radio-button label="样衣"></el-radio-button>
          <el-radio-button label="物料"></el-radio-button>
        </el-radio-group>
      </div> -->
      <el-form
        ref="form"
        :model="form"
        label-position="top"
        class="myform"
        size="mini"
      >
        <div>
          <el-form-item label="单号" class="myform-item">
            <el-input
              v-model="form.number"
              placeholder="请输入单号"
              @keyup.enter.native="onSearch"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" class="myform-item">
            <el-select v-model="form.groups" placeholder="请选择" clearable>
              <el-option
                v-for="item in optionsLX"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态" class="myform-item">
            <el-select v-model="form.status" placeholder="请选择" clearable>
              <el-option
                v-for="item in optionsSP"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归还状态" class="myform-item">
            <el-select
              v-model="form.data_return"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in optionsGH"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发起时间" class="myform-item">
            <el-date-picker
              clearable
              v-model="form.strtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-top: 38px">
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </div>
        <div></div>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" size="mini">
        <el-table-column prop="" label="" width="55">
          <template slot-scope="{ row }">
            <el-checkbox
              v-model="row.is"
              :disabled="row.status == 0 || row.status == 1"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="allocation_number" label="单号">
        </el-table-column>
        <el-table-column prop="instance_code" label="审批id"> </el-table-column>
        <el-table-column prop="groups" label="类型">
          <template slot-scope="{ row }">
            {{ row.groups | groupsTitle }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="申请事由" :show-overflow-tooltip="true" width="180">
        </el-table-column>
        <el-table-column prop="data_status" label="单号状态">
          <template slot-scope="{ row }">
            <div
              :style="{
                color:
                  row.data_status == 0
                    ? '#67C23A'
                    : row.data_status == 1
                    ? '#F56C6C'
                    : '',
              }"
            >
              {{
                row.data_status == 0
                  ? "正常"
                  : row.data_status == 1
                  ? "关闭"
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type_no" label="款号">
          <template slot-scope="{ row }">
            {{ row.type_no | arrString }}
          </template>
        </el-table-column>
        <el-table-column prop="jh_jc_num" label="计划/实际数量">
          <template slot-scope="{ row }">
            {{ row.jh_jc_num || 0 }}/
            <span style="color: red">{{ row.sj_jc_num || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sj_gh_num" label="归还数量">
          <template slot-scope="{ row }">
            {{ row.sj_gh_num || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="zng_num" label="已转内购数">
          <template slot-scope="{ row }">
            <div>{{ row.zng_num || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="jzx_num" label="已转销售数">
        <template slot-scope="{ row }">
          <div>{{ row.jzx_num || 0 }}</div>
        </template>
      </el-table-column>
        <el-table-column prop="zng_num" label="赠送数">
          <template slot-scope="{ row }">
            <div>{{ row.jzs_num || 0 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="计划发货日期">
        <template slot-scope="{ row }">
          {{row.date || '立即发货'}}
        </template>
      </el-table-column>
      <el-table-column prop="courier_number" label="快递单号"> </el-table-column>
        <el-table-column prop="createtime" label="发起时间"> </el-table-column>
        <el-table-column prop="status" label="审核状态">
          <template slot-scope="{ row }">
            <div
              :style="{
                color:
                  row.status == 0
                    ? '#E6A23C'
                    : row.status == 1
                    ? '#67C23A'
                    : row.status == 2
                    ? '#F56C6C'
                    : row.status == 3
                    ? '#909399'
                    : '',
              }"
            >
              {{
                row.status == 0
                  ? "审核中"
                  : row.status == 1
                  ? "已通过"
                  : row.status == 2
                  ? "已拒绝"
                  : row.status == 3
                  ? "已撤销"
                  : row.status == -1
                  ? "未发起"
                  : ""
              }}
              <!-- <span
                @click="onLookRun(row.allocation_number, 8, row.run_id)"
                style="color: #2c70d6"
                class="pointer"
                >（查看审批）</span
              > -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="data_return" label="归还状态">
          <template slot-scope="{ row }">
            <div
              :style="{
                color:
                  row.data_return == 1
                    ? '#E6A23C'
                    : row.data_return == 2
                    ? '#67C23A'
                    : '',
              }"
            >
              {{
                row.data_return == 0
                  ? "未归还"
                  : row.data_return == 1
                  ? "部分归还"
                  : row.data_return == 2
                  ? "全部归还"
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_push" label="推送状态">
          <template slot-scope="{ row }">
            <div
              :style="{
                color:
                  row.is_push == 1
                    ? '#67C23A'
                    : row.is_push == 2
                    ? '#F56C6C'
                    : row.is_push == 3
                    ? '#909399'
                    : '',
              }"
            >
              {{
                row.is_push == 0
                  ? "未推送"
                  : row.is_push == 1
                  ? "成功"
                  : row.is_push == 2
                  ? "失败"
                  : row.is_push == 3
                  ? "取消"
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template scope="{ row }">
            <el-button type="text" size="default" @click="onLook(row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-button
          type="primary"
          size="mini"
          @click="postAdminOmsSetAllocation_batch"
          >发起审批</el-button
        >
      </div>
      <pagination
        :form="form"
        :total="total"
        @paginationPostOrderTaskList="postAdminOmsgetAllocationtjllist"
      />
    </div>
  </div>
</template>

<script>
import {
  postAdminOmsgetAllocationtjllist,
  postAdminOmsgettongji,
  postAdminOmsSetAllocation_batch,
} from "@/api";
import { getStore } from "@/utils/localStorage.js";
import pagination from "@/components/pagination.vue";
import bz1 from "@/assets/images/bz1.png";
import bz2 from "@/assets/images/bz2.png";
export default {
  components: { pagination },
  filters: {
    arrString(value) {
      let string = "";
      for (let index = 0; index < value.length; index++) {
        if (index != 0) {
          string = string + "," + value[index].type_no;
        } else {
          string = value[index].type_no;
        }
      }
      return string;
    },
    groupsTitle(e) {
      if (e == 1) return "赠送";
      if (e == 2) return "借出";
      if (e == 3) return "归还";
      return e;
    },
    statusTitle(e) {
      if (e == 0) return "审核中";
      if (e == 1) return "已通过";
      if (e == 2) return "已拒绝";
      if (e == 3) return "已撤销";
      return e;
    },
    is_returnTitle(e) {
      if (e == 0) return "未归还";
      if (e == 1) return "部分归还";
      if (e == 2) return "全部归还";
      return e;
    },
  },
  data() {
    return {
      bz1,
      bz2,
      userinfo: "",
      src: "https://ssy.13yu.com/Public/products/STZ153908-0.png",
      radio: "成衣",
      classList: [],
      optionsSP: [
        {
          value: "-1",
          label: "未发起",
        },
        {
          value: "0",
          label: "审核中",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "2",
          label: "已拒绝",
        },
        {
          value: "3",
          label: "已撤销",
        },
      ],
      optionsGH: [
        {
          value: "0",
          label: "未归还",
        },
        {
          value: "1",
          label: "部分归还",
        },
        {
          value: "2",
          label: "全部归还",
        },
      ],
      optionsLX: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "赠送",
        },
        {
          value: "2",
          label: "借出",
        },
      ],
      form: {
        number: "",
        groups: "",
        status: "",
        data_return: "",
        strtime: "",
        endtime: "",
        page: 1,
        size: 10,
      },
      tableDataType: [
        {
          value: "成衣",
          jcnum: 50,
          ghnum: 40,
          zsnum: 30,
        },
        // {
        //   value: "样衣",
        //   jcnum: 50,
        //   ghnum: 40,
        //   zsnum: 30,
        // },
        // {
        //   value: "物料",
        //   jcnum: 50,
        //   ghnum: 40,
        //   zsnum: 30,
        // },
      ],
      tableData: [],
      total: 0,
    };
  },
  activated() {
    this.userinfo = getStore("userinfo");
    this.postAdminOmsgetAllocationtjllist(this.form);
    this.postAdminOmsgettongji();
  },
  methods: {
    async postAdminOmsSetAllocation_batch() {
      let that = this;
      let { tableData } = this;
      let allocation_number = [];

      for (let index = 0; index < tableData.length; index++) {
        if (tableData[index].is) {
          allocation_number.push(tableData[index].allocation_number);
        }
      }

      if (allocation_number.length) {
        this.$confirm("确定发起审批?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let obj = {
              allocation_number,
            };
            try {
              await postAdminOmsSetAllocation_batch(obj);
              this.$message.success("发起成功");
              await that.postAdminOmsgetAllocationtjllist(that.form);
            } catch (error) {}
          })
          .catch(() => {});
      }
    },
    async postAdminOmsgettongji() {
      let res = await postAdminOmsgettongji();
      this.classList = res.data;
    },
    onLend(e) {
      if (e == 2) {
        this.$router.push({
          name: "PDAdminTransfersAdd",
          query: { groups: e },
        });
      } else {
        this.$router.push({
          name: "PDAdminTransfersAddZ",
          query: { groups: e },
        });
      }
    },
    onLook(e) {
      if (e.groups == 1) {
        this.$router.push({
          name: "StatisticsAdminZ",
          query: { allocation_number: e.allocation_number },
        });
      } else {
        this.$router.push({
          name: "StatisticsAdmin",
          query: { allocation_number: e.allocation_number },
        });
      }
    },
    // 审批进度
    onLookRun(id, type, run_id) {
      this.$router.push({ name: "contractrunid", query: { id, type, run_id } });
    },
    async postAdminOmsgetAllocationtjllist(data) {
      this.form = data;
      let form = JSON.parse(JSON.stringify(this.form));
      if (form.strtime) {
        form.strtime = `${data.strtime[0]}`;
        form.endtime = `${data.strtime[1]}`;
      } else {
        form.strtime = "";
        form.endtime = "";
      }
      let res = await postAdminOmsgetAllocationtjllist(form);
      let tableData = res.data;
      tableData = tableData.map((e) => {
        e.is = false;
        return e;
      });
      this.tableData = tableData;

      this.total = Number(res.total);
    },
    onSearch() {
      let { form } = this;
      form.page = 1;
      form.size = 10;
      this.postAdminOmsgetAllocationtjllist(form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.Statistics {
  font-size: 12px;
  .Statistics-user {
    padding: 25px;
    background: #fff;
    display: flex;
    border-bottom: 1px solid #efefef;
    .Statistics-user-head {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
      > .el-image {
        width: 40px;
        height: 40px;
      }
    }
    .Statistics-user-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 40px;
      > div:nth-child(1) {
        margin-bottom: 4px;
        > span:nth-child(1) {
          font-size: 14px;
          font-weight: 600;
          margin-right: 10px;
        }
        > span:nth-child(2) {
          color: #999999;
        }
      }
    }
  }
  .Statistics-number {
    background: #fff;
    padding: 25px;
    display: flex;
    > div:nth-child(1) {
      margin-right: 10px;
    }
    .Statistics-number-content {
      display: flex;
      align-items: center;
      background: #efefef;
      padding: 10px;
      border-radius: 4px;
      width: 100%;
      > div:nth-child(1) {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      > div:nth-child(2) {
        > div:nth-child(1) {
          font-size: 14px;
          font-weight: 600;
        }
        > div:nth-child(2) {
          > span:nth-child(1) {
            font-size: 20px;
            font-weight: 600;
            color: #e6a23c;
          }
          > span:nth-child(2) {
            color: #2c70d6;
          }
        }
      }
    }
  }
  .Statistics-category {
    margin-top: 10px;
    background: #fff;
    padding: 25px;
    .Statistics-category-title {
      font-size: 16px;
      font-weight: 600;
      padding-bottom: 10px;
    }
  }
}
</style>